﻿
@{
    ViewBag.Title = "分子/分母來源";
    ViewBag.PageInfo = "Kpi/KpiMain";//Kpi/KpiActSource
    ViewBag.Month = DateTime.Now.Month == 1 ? (12).ToString() : (DateTime.Now.Month - 1).ToString();
    ViewBag.TdWidth = "100%";
    ViewBag.TfCs = 9;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@*右鍵菜單*@
<style>
    #askpimenu {
        display: none;
        /*height: 320px;*/
        width: 240px;
        position: absolute;
        z-index: 9999;
        background-color: #ffffff;
        border: 1px solid #ffffff;
        border-radius: 8px;
        box-shadow: 2px 2px 8px 2px #c4c4c4;
    }

    .askpimenu-item {
        height: 35px;
        line-height: 35px;
        padding: 0 10px;
        cursor: default;
    }

        .askpimenu-item:hover {
            border-radius: 8px;
            background-color: #f1f1f1;
        }

    .select_item {
        position: relative;
        margin-left: 0px;
        width: 162px;
        height: 10px;
    }
</style>
<div id="askpimenu">
</div>
<script>
    var aswidth = window.innerWidth;
    var asheight = window.innerHeight;
    //重新计算窗口大小
    window.addEventListener('resize', () => {
        aswidth = window.innerWidth;
        asheight = window.innerHeight;
    })
    var askpimenu = document.querySelector("#askpimenu");
    window.oncontextmenu = function (e) {
        //取消瀏覽器默認右鍵菜單
        e.preventDefault();
        var tableTitle = $("#KpiAsDataTd table thead tr")[0].children;
        var data = "";
        for (var i = 3; i < 17; i++) {
            if (askpimenu.innerHTML == '\n') {
                data += '<div class="askpimenu-item" data-id="' + i + '"><input class="askpicheck-item" type="checkbox" checked="checked" onchange="askpiHideCol(' + i + ', event)" />&nbsp;&nbsp;' + tableTitle[i].innerHTML.replace("<br>", "") + '</div>';
            } else {
                if (askpimenu.children[i - 3].children[0].checked) {
                    data += '<div class="askpimenu-item" data-id="' + i + '"><input class="askpicheck-item" type="checkbox" checked="checked" onchange="askpiHideCol(' + i + ', event)" />&nbsp;&nbsp;' + tableTitle[i].innerHTML.replace("<br>", "") + '</div>';
                } else {
                    data += '<div class="askpimenu-item" data-id="' + i + '"><input class="askpicheck-item" type="checkbox" onchange="askpiHideCol(' + i + ', event)" />&nbsp;&nbsp;' + tableTitle[i].innerHTML.replace("<br>", "") + '</div>';
                }
            }
        }
        askpimenu.innerHTML = data;

        //根據鼠標右鍵位置定位
        if (e.pageX + 240 > aswidth) {
            askpimenu.style.left = (aswidth - 260) + "px";
        } else {
            askpimenu.style.left = e.pageX + "px";
        }
        if (e.pageY + 480 > asheight) {
            askpimenu.style.top = (asheight - 480) + "px";
        } else {
            askpimenu.style.top = e.pageY + "px";
        }
        //顯示菜單
        askpimenu.style.display = "block";

    }
    window.onclick = function (e) {
        //點擊（非右鍵菜單範圍）關閉
        if (e.target.className != "askpimenu-item" && e.target.className != "askpicheck-item") {
            askpimenu.style.display = "none";
        }
    }
    window.onmousewheel = function (e) {
        //滑動滾輪關閉
        askpimenu.style.display = "none";
    }
    //監聽菜單點擊
    window.addEventListener("click", function (e) {
        if (e.target.dataset.id) {
            askpimenu.children[e.target.dataset.id - 3].children[0].checked = !askpimenu.children[e.target.dataset.id - 3].children[0].checked;
            askpiHideCol(e.target.dataset.id, askpimenu.children[e.target.dataset.id - 3].children[0].checked)
        }
        //switch (e.target.dataset.id) {
        //    case "1": break;
        //}
    });
    //table列隱藏
    function askpiHideCol(colIndex, event) {
        var checked;
        if (event == true || event == false) {
            checked = event;
        } else {
            checked = event.target.checked;
        }
        var thead = $("#KpiAsDataTd table thead tr")[0].children;
        var tbody = $("#KpiAsDataTd table tbody tr");
        //隱藏thead
        thead[colIndex].hidden = !checked;
        //隱藏tbody
        for (var i = 0; i < tbody.length; i++) {
            tbody[i].children[colIndex].hidden = !checked;
        }
    }
    //刷新數據後隱藏會失效，table每次渲染完後檢查一遍，若有失效則重新隱藏
    function asReloadHide() {
        if (askpimenu.innerHTML != '\n') {
            for (var j = 0; j < askpimenu.children.length; j++) {
                askpiHideCol(j + 3, askpimenu.children[j].children[0].checked);
            }
        }
    }
</script>

@*界面主體*@
<div style="position: fixed; margin-top: -260px; background-color: white; width: 100%; z-index: 100;">
    <div style="border: 4px solid #92d050; width: 80%; height: 180px; margin: auto; margin-top: 20px; border-radius: 10px;">
        <table style="width: 100%; margin-top:10px;">
            <tr style="height:50px;">
                <td style="width: 10%; text-align: right;">域：</td>
                <td style="width: 16%; text-align: left;">
                    <input id="TxtContractAs" type="text" value="@ViewBag.Contract" style="height:25px;width:162px;" />
                </td>
                <td style="width: 10%; text-align: right;">年度：</td>
                <td style="width: 16%; text-align: left;">
                    <input id="TxtYearAs" type="text" value="@DateTime.Now.Year" style="height:25px;width:162px;" />
                </td>
                <td style="width: 10%; text-align: right;">月份：</td>
                <td style="width: 16%; text-align: left;">
                    <div class="month_select_as" style="width:162px;margin-top:12px;">
                        <select style="display: none;" id="TxtKpiMonthAs" aria-label="TxtKpiMonthAs" multiple placeholder="" name="" code="">
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="width: 10%; text-align: right;">序號：</td>
                <td style="width: 16%; text-align: left;">
                    <input id="TxtKpiNoAs" type="text" style="height:25px;width:162px;" />
                </td>
                <td style="width: 10%; text-align: right;">流程：</td>
                <td style="width: 16%; text-align: left;">
                    <input id="TxtKpiDescAs" type="text" style="height:25px;width:162px;" />
                </td>
                <td style="width: 10%; text-align: right;">績效指標：</td>
                <td style="width: 16%; text-align: left;">
                    <input id="TxtKpiTargetAs" type="text" style="height:25px;width:162px;" />
                </td>
            </tr>
            <tr style="height:50px;">
                <td style="width: 10%; text-align: right;">部門：</td>
                <td style="width: 16%; text-align: left;">
                    <select id="TxtKpiDeptAs" aria-label="TxtKpiDeptAct" style="height:25px;width:162px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.Dept)
                            {
                                <option value="@item["DEPT_ID"].ToString()">@item["DEPT_DESC"].ToString()</option>
                            }
                        }
                    </select>
                </td>
                <td style="width: 10%; text-align: right;">衡量頻率：</td>
                <td style="width: 16%; text-align: left;">
                    <select id="TxtKpiFreqAs" aria-label="TxtKpiFreqAs" style="height:25px;width:162px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.Freq)
                            {
                                <option value="@item["CONF_ID"].ToString()">@item["CONF_NM"].ToString()</option>
                            }
                        }
                    </select>
                </td>
                <td style="width: 10%; text-align: right;">輸入方式：</td>
                <td style="width: 16%; text-align: left;">
                    <select id="TxtKpiInputAs" aria-label="TxtKpiInputAs" style="height:25px;width:162px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.Input)
                            {
                                <option value="@item["CONF_ID"].ToString()">@item["CONF_NM"].ToString()</option>
                            }
                        }
                    </select>
                </td>
            </tr>
        </table>
    </div>
    <div style="text-align: left; margin-top: 15px; margin-left:15%; width: 80%; height: 40px;">
        <input id="BtnKpiSearchAs" type="button" value="查&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;詢" style="width: 100px; height: 25px;" onclick="btnKpiSearchClickAs('FP')" />
    </div>
</div>
<div id="KpiAsDataTdP" style="text-align: center; margin-top: 260px; margin-left: 2%; width: 96%; overflow: auto; border-radius: 5px; z-index: 99;">
    @{
        <div id="KpiAsDataTd" style="text-align: center; width: @ViewBag.TdWidth; height: 583px;">
            @{
                System.Data.DataTable kpiAsData = ViewBag.KpiAsData;
                System.Data.DataTable kpiAsDataGroup = ViewBag.KpiAsDataGroup;
                string vb_month = ViewBag.Month;
                if (kpiAsDataGroup.Rows.Count > 0)
                {
                    <table style="width: 100%;">
                        <thead style="position:sticky;top:0;">
                            <tr style="background-color:#507cd1; font-size:18px; color: white; font-weight:bold; height:40px;">
                                <td hidden="hidden">IS_UPDATE</td>
                                <td hidden="hidden">KPI_ID</td>
                                <td width="60"><input id="kpiastitlecheck" type="checkbox" aria-label="kpiastitlecheck" onchange="kpititelcheckChangeAs(event)" /></td>
                                <td width="80">域</td>
                                <td width="60">年度</td>
                                <td width="60">NO</td>
                                <td width="160">流程</td>
                                <td width="180">績效指標</td>
                                <td width="180">公式</td>
                                <td width="120">分子/分母</td>
                                <td width="80">衡量頻率</td>
                                <td width="100">數據<br />詳細來源</td>
                                <td width="200">數據<br />抓取步驟</td>
                                <td width="80">聯絡人</td>
                                <td width="100">數據<br />抓取時間</td>
                                <td width="80">輸入<br />方式</td>
                                <td width="80">流程<br />負責人</td>
                                @{
                                    //月份篩選
                                    if (vb_month == "1")
                                    {
                                        <td width="110">上年度<br />12月</td>
                                    }
                                    for (int i = 1; i <= 12; i++)
                                    {
                                        if (vb_month.IndexOf(',') >= 0 && !vb_month.Split(',').Contains(i.ToString()))
                                        {
                                            //多選
                                            continue;
                                        }
                                        else
                                        {
                                            //單選
                                            if (!vb_month.Split(',').Contains((i + 1).ToString()) && !vb_month.Split(',').Contains(i.ToString()) && vb_month != "0")
                                            {
                                                continue;
                                            }
                                        }
                                        if (vb_month.Split(',').Count() > 2)
                                        {
                                            <td width="100">@(i)月</td>
                                        }
                                        else
                                        {
                                            <td width="110">@(i)月</td>
                                        }
                                    }
                                }
                            </tr>
                        </thead>
                        <tbody>
                            @{
                                int colorIndex = 1;
                                string color;
                                System.Data.DataRow[] dataRows;
                                foreach (System.Data.DataRow item in kpiAsDataGroup.Rows)
                                {
                                    color = colorIndex % 2 == 1 ? "#eff3fb" : "#ffffff";
                                    <tr style="background-color:@color; height:50px;">
                                        <td hidden="hidden">N</td>
                                        <td hidden="hidden">@item["KPI_ID"].ToString()</td>
                                        <td><input class="kpiasdatacheck" type="checkbox" aria-label="kpiasdatacheck" onchange="kpidatacheckChangeAs(event)" /></td>
                                        <td>@item["SITE"].ToString()</td>
                                        <td>@item["KPI_YEAR"].ToString()</td>
                                        <td>@item["KPI_NO"].ToString()</td>
                                        <td>@item["KPI_DESC"].ToString()</td>
                                        <td>@item["KPI_TARGET"].ToString()</td>
                                        <td>@item["KPI_FUNC"].ToString()</td>
                                        <td>@item["KPI_VALUE_DESC"].ToString()</td>
                                        <td>@item["FREQ_DESC"].ToString()</td>
                                        <td>@item["DATA_SOURCE"].ToString()</td>
                                        <td>@item["DATA_SOURCE_DESC"].ToString()</td>
                                        <td>@item["CONTACT_PERSON"].ToString()</td>
                                        <td>@item["WHEN_TO_GET_DESC"].ToString()</td>
                                        <td>@item["INPUT_TYPE"].ToString()</td>
                                        <td>@item["KPI_OWNER"].ToString()</td>
                                        @{

                                            dataRows = kpiAsData.Select("KPI_ID=" + item["KPI_ID"].ToString() + " AND SITE='" + item["SITE"].ToString() + "' AND KPI_YEAR=" + item["KPI_YEAR"].ToString() + " AND KPI_NO=" + item["KPI_NO"].ToString() + " AND PERIOD_TYPE='" + item["PERIOD_TYPE"].ToString() + "' AND KPI_VALUE_TYPE = '" + item["KPI_VALUE_TYPE"].ToString() + "'");
                                            for (int i = 1; i <= dataRows.Count(); i++)
                                            {
                                                if (vb_month.IndexOf(',') >= 0 && !vb_month.Split(',').Contains(i.ToString()))
                                                {
                                                    //多選
                                                    continue;
                                                }
                                                else
                                                {
                                                    //單選
                                                    if (!vb_month.Split(',').Contains((i + 1).ToString()) && !vb_month.Split(',').Contains(i.ToString()) && vb_month != "0")
                                                    {
                                                        continue;
                                                    }
                                                }
                                                <td>@dataRows[i - 1]["KPI_VALUE"].ToString()</td>
                                            }
                                        }
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    colorIndex++;
                                }
                            }
                        </tbody>
                        <tfoot>
                            <tr style="background-color:#507cd1; font-size:15px; color: white; height:35px;">
                                <td colspan="17" style="text-align: left; position: sticky; bottom: 0; left: 0; z-index: 2; background-color: #507cd1;">
                                    &#12288;&#12288;&#12288;
                                    第:
                                    <span id="pagesIndex">@ViewBag.PagesIndex</span>
                                    頁/共:
                                    <span>@ViewBag.PagesCount</span>
                                    頁
                                    &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                    &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                    &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                    &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                    <a style="cursor:pointer;color:white;" onclick="btnKpiSearchClickAs('FP')">首頁</a>
                                    <a style="cursor:pointer;color:white;" onclick="btnKpiSearchClickAs('PP')">上一頁</a>
                                    <a style="cursor:pointer;color:white;" onclick="btnKpiSearchClickAs('NP')">下一頁</a>
                                    <a style="cursor:pointer;color:white;" onclick="btnKpiSearchClickAs('LP')">尾頁</a>
                                    轉到第
                                    <input id="pagesTo" type="number" value="@ViewBag.PagesIndex" style="height:20px;width:40px;color:black;" />
                                    頁
                                    <a style="cursor:pointer;color:white;" onclick="btnKpiSearchClickAs('TP')">Go</a>
                                    &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                    &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                    &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                    &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;&#12288;
                                    每頁
                                    <select id="pagesNum" style="height: 20px; width: 40px; color: black;" onchange="btnKpiSearchClickAs('FP')">
                                        @{
                                            int value = 0;
                                            for (int i = 1; i <= 5; i++)
                                            {
                                                value = i * 10;
                                                if (ViewBag.pagesNum == i * 10)
                                                {
                                                    <option value="@value" selected="selected">@value</option>
                                                }
                                                else
                                                {
                                                    <option value="@value">@value</option>
                                                }
                                            }
                                        }
                                    </select>
                                    筆/共
                                    <span>@ViewBag.DataNums</span>
                                    筆
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                }
                else
                {
                    <h3>未查詢到數據！</h3>
                }
            }
        </div>
    }
</div>

<script>
    //查詢
    function btnKpiSearchClickAs(flipPage) {
        showLoading();
        $.ajax({
            type: "get",
            url: "/Kpi/BtnSearchClickAs",
            data: {
                txtKpiSite: $("#TxtContractAs").val(),
                txtKpiYear: $("#TxtYearAs").val(),
                txtKpiNo: $("#TxtKpiNoAs").val(),
                txtKpiDesc: $("#TxtKpiDescAs").val(),
                txtKpiTarget: $("#TxtKpiTargetAs").val(),
                txtKpiDept: $("#TxtKpiDeptAs").val(),
                txtKpiPeriod: "M",
                txtKpiFreq: $("#TxtKpiFreqAs").val(),
                txtKpiMonth: sel_data,
                txtKpiInput: $("#TxtKpiInputAs").val(),
                pagesIndex: $("#pagesIndex").text(),
                pagesNum: $("#pagesNum").val(),
                pagesTo: $("#pagesTo").val(),
                flipPage: flipPage
            },
            success: function (data) {
                $("#KpiAsDataTdP").html(data);
                asReloadHide()
                hideLoading();
            },
            error: function (err) {
                hideLoading();
            }
        });
    }
    //標題全選
    function kpititelcheckChangeAs(event) {
        var kpiasdatacheck = $(".kpiasdatacheck");
        for (var i = 0; i < kpiasdatacheck.length; i++) {
            kpiasdatacheck[i].checked = event.srcElement.checked;
        }
    }
    //內容全選
    function kpidatacheckChangeAs(event) {
        if (event.srcElement.checked) {
            var kpiasdatacheck = $(".kpiasdatacheck");
            var checkeddata = 0;
            for (var i = 0; i < kpiasdatacheck.length; i++) {
                if (kpiasdatacheck[i].checked) {
                    checkeddata++;
                }
            }
            if (checkeddata == kpiasdatacheck.length && checkeddata > 0) {
                $("#kpiastitlecheck")[0].checked = true;
            }
        } else {
            $("#kpiastitlecheck")[0].checked = event.srcElement.checked;
        }
    }
    //根據內容合併行向單元格
    function tableRowSpanAs(colIndex1, colIndex2) {
        var tr = $(".kpiastr");
        var td = $(".kpiastr:eq(0)")[0];
        var colIndexS = colIndex1 < 0 || colIndex1 > td.cells.length ? 0 : colIndex1;
        var colIndexE = colIndex2 < 0 || colIndex2 > td.cells.length ? td.cells.length : colIndex2;
        if (colIndexS > colIndexE) {
            var tmpIndex;
            tmpIndex = colIndexE;
            colIndexE = colIndexS;
            colIndexS = tmpIndex;
        }
        var cellText;
        var nextCellText;
        var rowIndex;
        var rowspan;
        //var colorIndex = 0;
        for (var j = colIndexS; j <= colIndexE; j++) {
            cellText = "";
            nextCellText = "";
            rowIndex = 0;
            for (var i = 0; i < tr.length; i += 3) {
                $(".kpiastr:eq(" + i + ") td:eq(" + j + ")").css("background-color", "#eff3fb");
                nextCellText = $(".kpiastr:eq(" + i + ") td:eq(" + j + ")")[0].innerHTML;
                if (cellText == "") {
                    rowIndex = i;
                    rowspan = 3;
                    cellText = nextCellText;
                    //$(".kpiastr:eq(" + rowIndex + ") td:eq(" + j + ")").css("background-color", colorIndex % 2 == 0 ? "#eff3fb" : "#ffffff");
                    //colorIndex++;
                } else {
                    if (cellText != nextCellText) {
                        rowIndex = i;
                        rowspan = 3;
                        cellText = nextCellText;
                        //$(".kpiastr:eq(" + rowIndex + ") td:eq(" + j + ")").css("background-color", colorIndex % 2 == 0 ? "#eff3fb" : "#ffffff");
                        //colorIndex++;
                    } else if (cellText == nextCellText) {
                        rowspan += 3;
                        $(".kpiastr:eq(" + rowIndex + ") td:eq(" + j + ")").attr("rowSpan", rowspan);
                        $(".kpiastr:eq(" + i + ") td:eq(" + j + ")").hide();
                    }
                }
            }
        }
    }
    var datastr = "[@ViewBag.KpiMonthSel]";
    datastr = datastr.replaceAll("&quot;", '"');
    var dataitem = JSON.parse(datastr);
    var sel_data = new Date().getMonth().toString();
    sel_data = "0" ? "12" : sel_data;
    //多選下拉框
    $('.month_select_as').dropdown({
        defaultdata: [{ "selected": false, "name": "全选", "id": "all" }], //默认数据-全选或不限
        data: dataitem,
        readonly: false, //是否禁用
        searchable: false, //下拉区域是否显示搜索框
        limitCount: 2000, //限制数据总量
        multipleMode: '', // 标记项模式 空字符串：文本模式 / 'label':标记项模式 / 'unfilling':内容不填充到输入框
        choice: function (ele) { //选中返回（多选）
            //console.log(ele);
            var data = [];
            for (var i = 0; i < ele.length; i++) {
                data.push(ele[i].id)
            }
            sel_data = data.join(',');
        },
        del: function () {
            //console.log('删除:', '初始化页面数据');
        },
        clearAll: function clearAll(event) {
            $("#TxtKpiMonthAs").val([]);
            sel_data = "0";
        }
    });
</script>
